<template>
  <Dialog
    :visible="props.visible"
    :header="props.title"
    :breakpoints="{ '960px': '50vw' }"
    style="width: 70vw; height: 600px;"
    :maximizable="true"
    :closable="false"
    v-on:hide="handleHide"
    :pt="{
      content: { class: 'h-full' },
      header: { class: 'flex justify-content-start' },
      maximizableButton: { class: 'maxIcon border-none h-1rem w-1rem', style: 'box-shadow: none;' },
      ...props.pt
    }"
  >
    <template v-slot:header="">
      <span @click="props.handleClose()" class="closeIcon">
        <svg t="1692804827012" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="914" width="15" height="15"><path d="M512 64c-247.00852 0-448 200.960516-448 448S264.960516 960 512 960c247.00852 0 448-200.960516 448-448S759.039484 64 512 64zM694.752211 649.984034c12.480043 12.54369 12.447359 32.768069-0.063647 45.248112-6.239161 6.208198-14.399785 9.34412-22.591372 9.34412-8.224271 0-16.415858-3.135923-22.65674-9.407768l-137.60043-138.016718-138.047682 136.576912c-6.239161 6.14455-14.368821 9.247789-22.496761 9.247789-8.255235 0-16.479505-3.168606-22.751351-9.504099-12.416396-12.576374-12.320065-32.800753 0.25631-45.248112l137.887703-136.384249-137.376804-137.824056c-12.480043-12.512727-12.447359-32.768069 0.063647-45.248112 12.512727-12.512727 32.735385-12.447359 45.248112 0.063647l137.567746 137.984034 138.047682-136.575192c12.54369-12.447359 32.831716-12.320065 45.248112 0.25631 12.447359 12.576374 12.320065 32.831716-0.25631 45.248112L557.344443 512.127295 694.752211 649.984034z" fill="#d81e06" p-id="915"></path></svg>
      </span>
    </template>
    <template v-slot:maximizeicon="">
      <svg t="1692803518812" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="884" width="16" height="16"><path d="M512 128c-212.1 0-384 171.9-384 384s171.9 384 384 384 384-171.9 384-384-171.9-384-384-384z m224 368c0 17.7-14.3 32-32 32-8.8 0-16.8-3.6-22.6-9.4-5.8-5.8-9.4-13.8-9.4-22.6v-89.1c0-3.6-4.3-5.3-6.8-2.8L404.1 665.2c-2.5 2.5-0.7 6.8 2.8 6.8H496c17.7 0 32 14.3 32 32 0 8.8-3.6 16.8-9.4 22.6-5.8 5.8-13.8 9.4-22.6 9.4H352c-35.3 0-64-28.7-64-64V528c0-17.7 14.3-32 32-32 8.8 0 16.8 3.6 22.6 9.4 5.8 5.8 9.4 13.8 9.4 22.6v89.1c0 3.6 4.3 5.4 6.8 2.8l261.1-261.1c2.5-2.5 0.7-6.8-2.8-6.8H528c-17.7 0-32-14.3-32-32 0-8.8 3.6-16.8 9.4-22.6 5.8-5.8 13.8-9.4 22.6-9.4h144c35.3 0 64 28.6 64 64v144z" p-id="885" fill="#1afa29"></path></svg>
    </template>
    <slot></slot>
  </Dialog>
</template>

<script setup lang="ts">
import {  } from 'vue'
import { useRouter } from 'vue-router'
import { useToast, Dialog, Toast } from '@/utils/primevue'
import type { DialogPassThroughOptions } from 'primevue/dialog';
// import useMacModalStore from '@/stores/macModal';

// const macModal = useMacModalStore()

type TProps = {
  visible: boolean,
  title: string,
  handleClose: () => void,
  // handleSize: () => void,
  pt?: DialogPassThroughOptions
}
const router = useRouter()

const props = withDefaults(defineProps<TProps>(), {
  visible: false
})


const handleHide = () => {
  // router.push('/')
}
</script>

<style scoped lang="scss">
 .closeIcon {
  margin-bottom: -3px;
  cursor: pointer;
 }
</style>
